<template>
	<view>
		<view class="bind-form">
			<u-form :model="form" :error-type="errorType" ref="uForm">
				<u-form-item label-width="140" label="姓 名 :" prop="username">
					<u-input v-model="form.username" type="text" placeholder="请输入姓名" clearable="true" />
				</u-form-item>
				<u-form-item label-width="140" label="电 话 :" prop="coding">
					<u-input v-model="form.coding" placeholder="请输入电话" clearable="true" maxlength="11" type="number" />
				</u-form-item>
				<u-form-item label-width="140" label="身份证 :" prop="idCert">
					<u-input v-model="form.idCert" type="idCert" placeholder="非必填" clearable="true" maxlength="18" />
				</u-form-item>
			</u-form>
			<privacy></privacy>
			<view class="btn">
				<u-button type="warning" @click="submit" :disabled="isSubmit" :loading="isSubmit">提交</u-button>
			</view>
		</view>
		<u-toast ref="uToast" />
		<Footer :copyright="footer.copyright"></Footer>
		<authDialog :isAuthShow="isAuthShow" @authConfirm="authConfirm" ></authDialog>
	</view>
</template>
<script>
	import Json from '@/utils/Json.js';
	import Footer from '@/components/footer/footer.vue';
	import authDialog from '@/components/auth/auth.vue';
	import privacy from '@/components/privacy.vue';
	export default {
		components: {
			authDialog,
			privacy
		},
		data() {
			return {
				statusList: '',
				footer: {},
				popupShow: false,
				isAuthShow: false,
				form: {
					username: '',
					idCert: '',
					coding: '',
				},
				isSubmit: false,

				rules: {
					username: [{
						required: true,
						message: '请输入姓名',
						trigger: ['blur'],
					}, ],
					coding: [{
						required: true,
						message: '请输入电话',
						trigger: ['change', 'blur'],

					}, ],

				},
				errorType: ['toast', 'border-bottom']
			};
		},
		components: {
			Footer
		},
		onLoad(option) {
		},
		onShow() {
			this.getUserInfor()
			this.isAuthShow = false
			if (this.$u.test.isEmpty(this.vuex_token)) {
				this.isAuthShow = true
			}
		},
		methods: {
			// 授权
			authConfirm(e) {
				console.log(e, "eeee")
				this.getUserInfor()
				if (e) {
					this.isAuthShow = false;
				}
			},
			close() {
				this.$u.route({
					type: 'navigateBack'
				})
			},
			submit() {
				if (this.form.username == '') {
					this.$refs.uToast.show({
						title: '姓名不能为空~',
						type: 'error',
					})
					return
				}
				if (this.form.coding.length < 11) {
					this.$refs.uToast.show({
						title: '手机号不正确',
						type: 'error',
					})
					return
				}
				if (!this.$u.test.isEmpty(this.form.idCert)) {
					if (!this.$u.test.idCard(this.form.idCert)) {
						this.$refs.uToast.show({
							title: '请输入正确证件号码',
							type: 'error',
						})
						return
					}
				}
				this.getregister()
			},
			getregister() {
				let that = this;
				let postData = {
					"name": this.form.username,
					"mobile": this.form.coding,
					"idcard": this.form.idCert,
				};
				// this.init()
				this.$u.post('/api/user/register_submit', postData).then(res => {
					that.statusList = -1
					that.popupShow = true
					console.log("111111", res)
					this.$refs.uToast.show({
						title: '提交成功',
						type: 'success',
					})
					this.$u.route({
						url: 'pages/user/index',
						type: 'switchTab'
					})
				}).catch(err => {
					console.log(err);
				}).finally(res=>{
					console.log("8999999999999999999");
				});
			},
			init(){
				// this.$u.post('/api/user/user_info').then(res => {
				// 	this.statusList = res.status
				// 	if (this.statusList != 2) {
				// 		this.popupShow = true
				// 	}
				// 	console.log(this.popupShow);
				// });
			},
			getUserInfor() {
				let that = this;
				that.$u.post('/api/user/user_info').then(res => {
					that.statusList = res.status
					if (that.statusList != 2) {
						this.popupShow = true
					}
					console.log(this.popupShow);
				});
			},
			toPage(path) {
				this.$u.route({
					url: path
				});
			},
		},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		}
	};
</script>

<style lang="scss" scoped>
	.bind-form {
		text-align: left;
		padding: 30rpx;
		background-color: #FFFFFF;

		.btn {
			width: 60%;
			margin: 20rpx auto;
		}
	}
</style>
